/*****************************************************************************************
 * floatz.layout.css
 * ---------------------------------------------------------------------------------------
 * Basic layouting elements for fixed (and also fluid) layout
 *
 * @project       floatz CSS Framework
 * @version       1.1.0
 * @see           http://code.google.com/p/floatz/
 * @author        Harald Humml
 * @copyright     Copyright (c) 1998-2010 by :humml:design
 * @link          http://design.humml.eu/toolbox/floatz
 * @license       Apache License 2.0 http://www.apache.org/licenses/LICENSE-2.0
 * @lastmodified  2010-02-16
 */

/**
 * ---------------------------------------------------------------------------------------
 * @section       Page container
 *
 * Page container that represents the nutshell of each web page. Acts also as target for
 * absolute positioned elements like toolbars, breadcrumbs, etc.
 */

#flz_page {
   background-color: #fff;
   float: left;
   position: relative;
   width: 985px;
}
/**
 * @workaround Remove visible overflow that causes horizontal scrollbar in liquid mode that
 *             are caused by sub-pixel bug correction in certain circumstances
 * @cssfor IE 5, 6
 * @affected IE 5, 6
 */
* html #flz_page {
   overflow: hidden;
}
/**
 * @workaround Remove visible overflow that causes horizontal scrollbar in liquid mode that
 *             are caused by sub-pixel bug correction in certain circumstances
 * @cssfor IE 7
 * @affected IE 7
 */
*:first-child+html #flz_page {
   overflow: hidden;
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Layout container
 *
 * Basic layout container that is used for the whole structure of a web page. Follows the
 * principle: everything is a box. Can be combined with layouters to provide auto calculated
 * widths based on percentages. Relative box acts also as target for absolute positioned 
 * elements like toolbars, breadcrumbs, etc.
 */

.flz_box {
   background-color: inherit;
   clear: none;
   float: left;
   width: 100%;
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Spacing containers
 * @see           http://www.satzansatz.de/cssd/onhavinglayout.html
 * @see           http://www.ejeliot.com/blog/59
 *
 * Spacing containers provide margin and padding functionality to layout containers. Using
 * self clearing method workaround to enwrap contained content as well as floating elements. 
 * To prevent duplicated paddings if spacers are used in single or multi row and single or 
 * multi column scenario, you can use spacers and subspacers to correct whitespaces.
 */

/* Spacers for whitespaces (see description above) */
.flz_spacer, 
.flz_lspacer, 
.flz_mspacer, 
.flz_rspacer, 
.flz_spacer_mrsc_top, 
.flz_spacer_mrsc_mid, 
.flz_spacer_mrsc_bottom,
.flz_lspacer_mrmc_top, 
.flz_lspacer_mrmc_mid, 
.flz_lspacer_mrmc_bottom,
.flz_mspacer_mrmc_top, 
.flz_mspacer_mrmc_mid, 
.flz_mspacer_mrmc_bottom,
.flz_rspacer_mrmc_top, 
.flz_rspacer_mrmc_mid, 
.flz_rspacer_mrmc_bottom,
.flz_subspacer,
.flz_lsubspacer, 
.flz_msubspacer, 
.flz_rsubspacer, 
.flz_subspacer_mrsc_top, 
.flz_subspacer_mrsc_mid, 
.flz_subspacer_mrsc_bottom, 
.flz_lsubspacer_mrmc_top, 
.flz_lsubspacer_mrmc_mid, 
.flz_lsubspacer_mrmc_bottom, 
.flz_msubspacer_mrmc_top, 
.flz_msubspacer_mrmc_mid, 
.flz_msubspacer_mrmc_bottom, 
.flz_rsubspacer_mrmc_top, 
.flz_rsubspacer_mrmc_mid, 
.flz_rsubspacer_mrmc_bottom {
   display: block;
}
/* Prevents loosing of padding-bottom, margin-bottom in all non-IE browsers in context of self clearing method */
.flz_spacer:after, 
.flz_lspacer:after, 
.flz_mspacer:after,  
.flz_rspacer:after,  
.flz_spacer_mrsc_top:after,  
.flz_spacer_mrsc_mid:after,  
.flz_spacer_mrsc_bottom:after, 
.flz_lspacer_mrmc_top:after,  
.flz_lspacer_mrmc_mid:after,  
.flz_lspacer_mrmc_bottom:after, 
.flz_mspacer_mrmc_top:after,  
.flz_mspacer_mrmc_mid:after,  
.flz_mspacer_mrmc_bottom:after, 
.flz_rspacer_mrmc_top:after,  
.flz_rspacer_mrmc_mid:after,  
.flz_rspacer_mrmc_bottom:after, 
.flz_subspacer:after,
.flz_lsubspacer:after,  
.flz_msubspacer:after,  
.flz_rsubspacer:after,  
.flz_subspacer_mrsc_top:after,  
.flz_subspacer_mrsc_mid:after,  
.flz_subspacer_mrsc_bottom:after,  
.flz_lsubspacer_mrmc_top:after,  
.flz_lsubspacer_mrmc_mid:after,  
.flz_lsubspacer_mrmc_bottom:after,  
.flz_msubspacer_mrmc_top:after,  
.flz_msubspacer_mrmc_mid:after,  
.flz_msubspacer_mrmc_bottom:after,  
.flz_rsubspacer_mrmc_top:after,  
.flz_rsubspacer_mrmc_mid:after,  
.flz_rsubspacer_mrmc_bottom:after {
   content: "."; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;
}
/* Activates hasLayout in IE <= 6 in context of self clearing method */
* html .flz_spacer, 
* html .flz_lspacer, 
* html .flz_mspacer, 
* html .flz_rspacer, 
* html .flz_spacer_mrsc_top, 
* html .flz_spacer_mrsc_mid, 
* html .flz_spacer_mrsc_bottom,
* html .flz_lspacer_mrmc_top, 
* html .flz_lspacer_mrmc_mid, 
* html .flz_lspacer_mrmc_bottom,
* html .flz_mspacer_mrmc_top, 
* html .flz_mspacer_mrmc_mid, 
* html .flz_mspacer_mrmc_bottom,
* html .flz_rspacer_mrmc_top, 
* html .flz_rspacer_mrmc_mid, 
* html .flz_rspacer_mrmc_bottom,
* html .flz_subspacer,
* html .flz_lsubspacer, 
* html .flz_msubspacer, 
* html .flz_rsubspacer, 
* html .flz_subspacer_mrsc_top, 
* html .flz_subspacer_mrsc_mid, 
* html .flz_subspacer_mrsc_bottom, 
* html .flz_lsubspacer_mrmc_top, 
* html .flz_lsubspacer_mrmc_mid, 
* html .flz_lsubspacer_mrmc_bottom, 
* html .flz_msubspacer_mrmc_top, 
* html .flz_msubspacer_mrmc_mid, 
* html .flz_msubspacer_mrmc_bottom, 
* html .flz_rsubspacer_mrmc_top, 
* html .flz_rsubspacer_mrmc_mid, 
* html .flz_rsubspacer_mrmc_bottom {
   height: 1%;
}
/* Prevents loosing of padding-bottom, margin-bottom in IE 7 in context of self clearing method */
:first-child+html .flz_spacer, 
:first-child+html .flz_lspacer, 
:first-child+html .flz_mspacer, 
:first-child+html .flz_rspacer, 
:first-child+html .flz_spacer_mrsc_top, 
:first-child+html .flz_spacer_mrsc_mid, 
:first-child+html .flz_spacer_mrsc_bottom,
:first-child+html .flz_lspacer_mrmc_top, 
:first-child+html .flz_lspacer_mrmc_mid, 
:first-child+html .flz_lspacer_mrmc_bottom,
:first-child+html .flz_mspacer_mrmc_top, 
:first-child+html .flz_mspacer_mrmc_mid, 
:first-child+html .flz_mspacer_mrmc_bottom,
:first-child+html .flz_rspacer_mrmc_top, 
:first-child+html .flz_rspacer_mrmc_mid, 
:first-child+html .flz_rspacer_mrmc_bottom,
:first-child+html .flz_subspacer,
:first-child+html .flz_lsubspacer, 
:first-child+html .flz_msubspacer, 
:first-child+html .flz_rsubspacer, 
:first-child+html .flz_subspacer_mrsc_top, 
:first-child+html .flz_subspacer_mrsc_mid, 
:first-child+html .flz_subspacer_mrsc_bottom, 
:first-child+html .flz_lsubspacer_mrmc_top, 
:first-child+html .flz_lsubspacer_mrmc_mid, 
:first-child+html .flz_lsubspacer_mrmc_bottom, 
:first-child+html .flz_msubspacer_mrmc_top, 
:first-child+html .flz_msubspacer_mrmc_mid, 
:first-child+html .flz_msubspacer_mrmc_bottom, 
:first-child+html .flz_rsubspacer_mrmc_top, 
:first-child+html .flz_rsubspacer_mrmc_mid, 
:first-child+html .flz_rsubspacer_mrmc_bottom {
   display: inline-block;
}

.flz_spacer, 
.flz_lspacer, 
.flz_mspacer, 
.flz_rspacer {
   padding: 1em;
}
.flz_subspacer_mrsc_top, 
.flz_lsubspacer_mrmc_top, 
.flz_msubspacer_mrmc_top, 
.flz_rsubspacer_mrmc_top {
   padding-top: 0;
   padding-bottom: 0.5em;
}
.flz_subspacer_mrsc_mid, 
.flz_lsubspacer_mrmc_mid, 
.flz_msubspacer_mrmc_mid, 
.flz_rsubspacer_mrmc_mid {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
.flz_subspacer_mrsc_bottom, 
.flz_lsubspacer_mrmc_bottom, 
.flz_msubspacer_mrmc_bottom, 
.flz_rsubspacer_mrmc_bottom {
   padding-top: 0.5em;
   padding-bottom: 0;
}
.flz_lsubspacer, 
.flz_msubspacer, 
.flz_lsubspacer_mrmc_top, 
.flz_msubspacer_mrmc_top, 
.flz_lsubspacer_mrmc_mid, 
.flz_msubspacer_mrmc_mid, 
.flz_lsubspacer_mrmc_bottom, 
.flz_msubspacer_mrmc_bottom {
   padding-right: 0.5em;
}
.flz_rsubspacer, 
.flz_msubspacer, 
.flz_msubspacer_mrmc_top, 
.flz_rsubspacer_mrmc_top, 
.flz_msubspacer_mrmc_mid, 
.flz_rsubspacer_mrmc_mid, 
.flz_msubspacer_mrmc_bottom, 
.flz_rsubspacer_mrmc_bottom {
   padding-left: 0.5em;
}
.flz_spacer_mrsc_top, 
.flz_lspacer_mrmc_top, 
.flz_mspacer_mrmc_top, 
.flz_rspacer_mrmc_top {
   padding-top: 1em;
   padding-bottom: 0.5em;
}
.flz_spacer_mrsc_bottom, 
.flz_lspacer_mrmc_bottom, 
.flz_mspacer_mrmc_bottom, 
.flz_rspacer_mrmc_bottom {
   padding-top: 0.5em;
   padding-bottom: 1em;
}
.flz_spacer_mrsc_mid, 
.flz_lspacer_mrmc_mid, 
.flz_mspacer_mrmc_mid, 
.flz_rspacer_mrmc_mid {
   padding-top: 0.5em;
   padding-bottom: 0.5em;
}
.flz_spacer_mrsc_top, 
.flz_spacer_mrsc_bottom, 
.flz_spacer_mrsc_mid {
   padding-left: 1em;
   padding-right: 1em;
}
.flz_lspacer, 
.flz_mspacer, 
.flz_lspacer_mrmc_top, 
.flz_mspacer_mrmc_top, 
.flz_lspacer_mrmc_mid, 
.flz_mspacer_mrmc_mid, 
.flz_lspacer_mrmc_bottom, 
.flz_mspacer_mrmc_bottom {
   padding-right: 0.5em;
}
.flz_mspacer, 
.flz_rspacer, 
.flz_mspacer_mrmc_top, 
.flz_rspacer_mrmc_top, 
.flz_mspacer_mrmc_mid, 
.flz_rspacer_mrmc_mid, 
.flz_mspacer_mrmc_bottom, 
.flz_rspacer_mrmc_bottom {
   padding-left: 0.5em;
}
.flz_lspacer_mrmc_top, 
.flz_lspacer_mrmc_mid, 
.flz_lspacer_mrmc_bottom {
   padding-left: 1em;
}
.flz_rspacer_mrmc_top, 
.flz_rspacer_mrmc_mid, 
.flz_rspacer_mrmc_bottom {
   padding-right: 1em;
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Layouters
 * @see           http://www.positioniseverything.net/explorer/dup-characters.html
 *                http://ejohn.org/blog/sub-pixel-problems-in-css/ 
 *                http://jacksleight.com/old/blog/2008/01/20/ie-floated-columns-totaling-100-percent-bug
 *
 * Layouters provide auto calculated widths (based on percentages) for layout and spacing 
 * containers. To avoid duplicated character bug and wrapping of floated containers in IE 
 * 5+, 6 and 7, each right most layouter must have a negative right margin of 3 pixels.
 */

.flz_l10, 
.flz_m10, 
.flz_r10 {
   width: 10%;
}
.flz_l20, 
.flz_m20, 
.flz_r20 {
   width: 20%;
}
.flz_l25, 
.flz_m25, 
.flz_r25 {
   width: 25%;
}
.flz_l33, 
.flz_r33 {
   width: 33.3%;
}
.flz_m33 {
   width: 33.4%;
}
.flz_l40, 
.flz_m40, 
.flz_r40 {
   width: 40%;
}
.flz_l50, 
.flz_m50, 
.flz_r50 {
   width: 50%;
}
.flz_l60, 
.flz_m60, 
.flz_r60 {
   width: 60%;
}
.flz_l66, 
.flz_r66 {
   width: 66.7%;
}
.flz_l75, 
.flz_r75 {
   width: 75%;
}
.flz_l80, 
.flz_m80, 
.flz_r80 {
   width: 80%;
}
.flz_l90, 
.flz_r90 {
   width: 90%;
}
.flz_r100 {
   width: 100%;
}

/* Addresses IE 5+ and 6 using star hack */
* html .flz_r20, 
* html .flz_r25, 
* html .flz_r40, 
* html .flz_r33, 
* html .flz_r50, 
* html .flz_r60, 
* html .flz_r66, 
* html .flz_r75, 
* html .flz_r80, 
* html .flz_r90, 
* html .flz_r100 {
   margin-right: -3px;
}
/* See: http://jacksleight.com/old/blog/2008/01/20/ie-floated-columns-totaling-100-percent-bug */
* html .flz_r10 {
   margin-right: -5px;
}

/* Addresses IE 7 using first child star hack */
*:first-child+html .flz_r20, 
*:first-child+html .flz_r25, 
*:first-child+html .flz_r40, 
*:first-child+html .flz_r33, 
*:first-child+html .flz_r50, 
*:first-child+html .flz_r60, 
*:first-child+html .flz_r66, 
*:first-child+html .flz_r75, 
*:first-child+html .flz_r80, 
*:first-child+html .flz_r90, 
*:first-child+html .flz_r100 {
   margin-right: -3px;
}
/* See: http://jacksleight.com/old/blog/2008/01/20/ie-floated-columns-totaling-100-percent-bug */
*:first-child+html .flz_r10 {
   margin-right: -5px;
}

/**
 * ---------------------------------------------------------------------------------------
 * @section       Helper classes for layouting
 */

/* Marker for relative positioning */
.flz_relative {
   position: relative;
}

/* Clears floating elements */
.flz_clear {
   clear: both;
}
